<template>
    <div style="display: flex; flex-direction: column; background-color: #f5f5f5">
        <div class="top" style="background-color: #f5f5f5">
            <div :style="{ height: statusBarHeight + 'px' }" @click="goback"></div>

            <div class="wrapper">
                <div class="nav">
                    <div style="font-weight: bold" class="navibar">订单状态</div>
                    <div
                        style="
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            font-size: 12px;
                        "
                    >
                        剩余支付时间 0:19:20
                    </div>
                    <div style="height: 10px; background-color: #f5f5f5"></div>
                </div>
                <div class="backIcon">
                    <div><uni-icons type="back" :size="30" @click="goback"></uni-icons></div>
                </div>
            </div>
        </div>
        <scroll-view style="flex-grow: 1">
            <div style="height: 50px; background-color: #f5f5f5"></div>

            <div class="card">
                <div class="row" style="align-items: start">
                    <div>
                        <image
                            src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                            mode="aspectFill"
                            style="width: 124px; height: 111px; border-radius: 5px"
                        ></image>
                    </div>
                    <div style="width: 10px"></div>
                    <div class="column" style="justify-content: start; align-items: start">
                        <div style="font-size: 12px; font-weight: bold">{{ params.type }}</div>
                        <TimeReservation></TimeReservation>
                        <text style="color: rgba(232, 89, 47, 1); font-size: 18px">18￥</text>
                        <div class="row">
                            <text style="color: rgba(232, 89, 47, 1); font-size: 8px"
                                >到手价：￥</text
                            ><text
                                style="
                                    color: rgba(232, 89, 47, 1);
                                    font-size: 10px;
                                    font-weight: bold;
                                "
                                >{{ 11 }}</text
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="dividerH"></div>
            <OrderContact></OrderContact>
            <div class="dividerH"></div>
            <div class="card">
                <text>订单编号:31281284428482149</text>
                <div style="height: 5px"></div>

                <text>下单时间:2022-12-09 13:59:00</text>
                <div style="height: 5px"></div>

                <text>支付方式:微信</text>
                <div style="height: 5px"></div>

                <text>支付时间:2022-12-09 13:59:30</text>
                <div style="height: 5px"></div>

                <text>配送方式:虚拟商品</text>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: center">
                <div>
                    <div class="blueButton">联系商家</div>
                    <div class="blueButton">再来一单</div>

                    <div class="blueButton" style="background-color: rgba(194, 194, 194, 1)">
                        取消订单
                    </div>
                </div>
            </div>
            <div>
                <div class="card">
                    <div class="row" style="width: 100%">
                        <div
                            style="
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                flex-grow: 1;
                            "
                            @click="showCsDialog"
                        >
                            <uni-icons type="headphones" size="20"></uni-icons>

                            <text>联系客服</text>
                        </div>
                        <!-- <div style="flex-grow: 1"></div> -->
                        <div
                            style="
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                flex-grow: 1;
                            "
                            @click="toRefund"
                        >
                            <uni-icons type="wallet" size="20"></uni-icons>

                            <text>退订</text>
                        </div>
                        <div
                            style="
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                flex-grow: 1;
                            "
                            @click="buyAgain"
                        >
                            <uni-icons type="refresh" size="20"></uni-icons>

                            <text>再来一单</text>
                        </div>
                    </div>
                </div>
            </div>
            <uni-popup ref="csPop" type="center">
                <uni-popup-dialog
                    mode="base"
                    message="成功消息"
                    title="提示"
                    content="如遇问题,请您拨打客服电话:010-89482008?"
                    :duration="2000"
                    :before-close="true"
                    @close="close"
                    @confirm="confirm"
                ></uni-popup-dialog>
            </uni-popup>
            <div class="dividerH"></div>
            <div style="display: flex; justify-content: center; flex-direction: row">
                <div class="openDoor">
                    <div class="row" style="width: 100%; justify-content: center" @click="openDoor">
                        <image
                            src="@/activityPages/assets/door-open.png"
                            style="width: 20px; height: 20px"
                        />
                        <text style="">开门</text>
                    </div>
                </div>
                <uni-popup ref="doorOpen">
                    <div class="card">
                        <div class="titleText">{{ params.type }}</div>
                        <TimeReservation></TimeReservation>
                        <div style="padding: 20px">
                            <div style="justify-content: center; width: 100%" class="row">
                                <QrCode :data="'123132132132'"></QrCode>
                            </div>
                        </div>
                    </div>
                </uni-popup>
            </div>
            <div style="height: 100px"></div>
        </scroll-view>
        <div class="bottom" style="width: 100%">
            <div class="card shadow" style="width: 100%">
                <div class="row" style="align-items: center; justify-content: end">
                    <text style="font-size: 12px">已优惠10￥</text>
                    <div style="flex-grow: 1"></div>
                    <text>合计：</text>
                    <div class="row" style="align-items: center">
                        <div v-if="coins > 0" class="row">
                            <text class="moneyText" style="font-weight: bold"
                                >{{ coins
                                }}<text class="moneyText" style="font-size: 10px">积分</text>
                            </text>
                        </div>
                        <img
                            v-if="coins > 0 && price > 0"
                            src="@/activityPages/assets/add5464.png"
                            style="width: 12px; height: 12px"
                        />
                        <text v-if="price > 0" class="moneyText" style="font-weight: bold"
                            >{{ price }}￥</text
                        >

                        <text v-if="price <= 0 && coins <= 0" class="moneyTextFree">免费</text>
                    </div>
                    <div style="width: 20px"></div>
                    <div class="button" @click="onConfirm">立即支付</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TimeReservation from '@/activityPages/components/time-reservation.vue'
import OrderContact from '@/activityPages/components/order-contact.vue'
import QrCode from '@/components/activity/qr-code.vue'
import { onLoad } from '@dcloudio/uni-app'
import ReservationType from '@/activityPages/const/reservation'

const params = ref({})
onLoad((e) => {
    params.value = e
    console.log('share order detail', e)
})
const { windowWidth, windowHeight, statusBarHeight } = uni.getSystemInfoSync()
console.log('windowWidth', windowWidth)

const coins = ref(100)
const doorOpen = ref(null)
function buyAgain() {
    console.log('buyAgain')
}
function toRefund() {
    uni.navigateTo({
        url: `/activityPages/refund/refund?goodsType=${params.value.type}&title=${ReservationType.share}`
    })
}
function openDoor() {
    doorOpen.value.open()
}
const csPop = ref(null)
function showCsDialog() {
    csPop.value.open()
}
function close() {
    csPop.value.close()
}

function confirm() {
    csPop.value.close()

    uni.makePhoneCall({
        phoneNumber: '12312312313',
        success: () => {
            console.log('拨打电话成功！')
        },
        fail: () => {
            console.error('拨打电话失败！')
        }
    })
}
const price = ref(100)
function goback() {
    console.log('goback')
    uni.navigateBack()
}
</script>

<style scoped lang="scss">
@import url('@/activityPages/style/card.css');
.button {
    width: 116px;
    height: 35px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(236, 106, 45, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blueButton {
    left: 34px;
    top: 687px;
    width: 327px;
    height: 29.34px;
    line-height: 17px;
    border-radius: 20px;
    background-color: rgba(0, 153, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;
}
.wrapper {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
}
.backIcon {
    position: absolute;
    z-index: 2;
}
.nav {
    position: absolute;
    z-index: 1;
    width: 100%;
    background-color: #f5f5f5;
}
.navibar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.top {
    position: -webkit-sticky;
    position: sticky;
    top: var(--window-top);
    z-index: 99;
    padding: 10px;
}

.openDoor {
    left: 60.5px;
    top: 673px;
    width: 269px;
    height: 56px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(255, 166, 88, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}
</style>
